/*
 * @Descripttion:
 * @version:
 * @Author: 周凯
 * @Date: 2020-05-01 19:02:48
 * @LastEditors: 周凯
 * @LastEditTime: 2020-05-02 10:44:09
 */
import React, { useEffect } from "react";
import * as THREE from "three";
import Stats from "stats.js";
import OrbitControls from "three-orbitcontrols";
import "./app.css";

const App = () => {
  useEffect(() => {
    Three();
    return () => {};
  }, []);
  const Three = () => {
    /**
     * 创建场景
     */
    const screen = new THREE.Scene();
    // 获取节点
    const dom = document.getElementById("container");
    /**
     * 监控的信息状态
     * FPS：最后一秒的帧数，越大越流畅

     * MS：渲染一帧需要的时间（毫秒），越低越好

     * MB：占用的内存信息

     * CUSTOM：自定义面板
     */
    const stats = new Stats();
    dom.appendChild(stats.dom);
    /**
     * 创建网格模型
     */
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    // 材质对象
    const meterial = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
    });
    // 网格模型对象
    const mesh = new THREE.Mesh(geometry, meterial);
    screen.add(mesh);

    /**
     * 光源设置
     */
    // 点光源
    const point = new THREE.PointLight(0xffffff);
    // 光源位置
    point.position.set(400, 200, 300);
    screen.add(point);
    // 环境光
    const ambient = new THREE.AmbientLight(0x444444);
    screen.add(ambient);

    /**
     * 相机设置
     */
    // 窗口宽高
    const width = window.innerWidth;
    const height = window.innerHeight;
    // 窗口宽高比
    const k = width / height;
    // 三维场景显示范围的控制系数，系数越大，显示的范围越大
    const s = 200;
    // 创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    // 设置相机的位置
    camera.position.set(200, 300, 200);
    // 设置相机方向(指向的场景对象)
    camera.lookAt(screen.position);
    /**
     * 创建渲染器对象
     */

    const renderer = new THREE.WebGLRenderer();
    // 设置渲染区域尺寸
    renderer.setSize(width, height);
    // 设置背景颜色
    renderer.setClearColor(0xb9d3ff, 1);

    /**
     * 设置全局的样式
     */
    // body元素中插入canvas对象
    dom.appendChild(renderer.domElement);
    // 执行渲染操作 指定场景、相机作为参数
    function render() {
      renderer.render(screen, camera);
    }
    render();
    console.log(screen);

    /**
     * 渲染动画(requestAnimationFrame)
     */
    // (function rendingAnimation() {
    //   render()
    //   // 旋转效果
    //   mesh.rotateY(0.01);
    //   requestAnimationFrame(rendingAnimation);
    // })();

    /**
     * 鼠标移动效果(方便调试) 可使用change事件，也可以使用渲染函数，不停渲染
     */
    // 创建控件对象，相机对象camera作为参数，控件可以监听鼠标的变化，改变相机对象的属性。
    const controls = new OrbitControls(camera, renderer.domElement);
    // 监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener("change", render);
  };
  return <div id="container"></div>;
};

export default App;
